<template>
	<view class="appointment" :style="css.page + 'min-height:' + $xyfun.xysys().windowHeight + 'px'" v-if="!isLoading">
		<view class="tab flex tc tb p-tb-25" :style="css.mbg">
			<view v-for="(item, index) in status" :key="index" :class="'col-' + status.length" @tap="setTab(index)">
				<view :style="statusIndex == index ? css.tcmc : css.tcm">
					{{ item.name }}
					<view class="line" :style="statusIndex == index ? css.mcbg : 'bc-w'"></view>
				</view>
			</view>
		</view>

		<view class="order-list p-tb-30" v-if="!isEmpty">
			<view class="item br-10 m-lr-30 m-b-20 p-t" :style="css.mbg" v-for="item in orderList" :key="item.id">
				<view class="p-lr-30 p-tb-25 bl-b" :style="css.blpc">
					<view class="m-b-15 flex">{{ item.consignee }} {{ item.mobile }}
						<text class="m-l-auto" :style="css.tcmc">{{ item.status_text }}</text>
					</view>
					<view v-if="item.remark != ''" class="m-t-15"><text :style="css.tcl">客户备注：</text>{{ item.remark }}</view>
				</view>

				<view class="flex br-10 camp-list" :style="css.mbg">
					<view class="br-10 goods-list" :style="css.mbg" v-if="$xyfun.strSearch(item.type, 'lease')">
						
						<view class="flex bl-b p-lr-30 p-tb-20" :style="css.blpc">
							<text>管理人员备注</text>
							<text class="m-l-auto" :style="css.tcl"><text
								>{{ item.staff_remark}}</text></text>
						</view>	
						<view class="flex bl-b p-lr-30 p-tb-20" :style="css.blpc">
							<text>用户备注</text>
							<text class="m-l-auto" :style="css.tcl"><text
								>{{ item.remark}}</text></text>
						</view>
						<view class="flex bl-b p-lr-30 p-tb-20" :style="css.blpc">
							<text>租赁时常</text>
							<text class="m-l-auto" :style="css.tcl">{{ item.current_time }}</text>
						</view>
						<view class="flex bl-b p-lr-30 p-tb-20" :style="css.blpc" v-if="
                item.ext_arr.timeout_time &&
                item.ext_arr.timeout_time_text &&
                item.status == 3
              ">
							<text>租赁超时</text>
							<text class="m-l-auto" :style="css.tcl"><text
									:style="css.tcmc">{{ item.ext_arr.timeout_time_text }}</text></text>
						</view>
						<view class="flex bl-b p-lr-30 p-tb-20" :style="css.blpc" v-if="
                item.ext_arr.timeout_price &&
                item.ext_arr.timeout_price != '' &&
                item.status == 3
              ">
							<text>超时费用</text>
							<text class="m-l-auto" :style="css.tcl"><text
									:style="css.tcmc">{{ item.ext_arr.timeout_price }}</text></text>
						</view>
						<view class="flex bl-b p-lr-30 p-tb-20" :style="css.blpc" v-if="
                item.ext_arr.timeout_price &&
                item.ext_arr.timeout_price != '' &&
                item.status == 3
              ">
							<text>退还押金</text>
							<text class="m-l-auto" :style="css.tcl"><text :style="css.tcmc">{{ item.ext_arr.deposit }}</text></text>
						</view>
						<view :style="css.blpc" class="item p-lr-30 p-t-30 flex" v-for="(g, index) in item.item" :key="index"
							v-if="g.goodstype == 'single' || g.goodstype == 'package'">
							<view class="l ovh br-10">
								<image :src="g.goodsimage" />
							</view>
							<view class="r psr m-l-20">
								<view class="tb lh-40 goods-name">
									{{ g.goodsname }}
								</view>
								<view class="sku-text m-t-5" v-if="g.goodsskutext">
									<text class="sku-text ts-24 lh-24 br-10 p-lr-25 p-tb-" :style="css.pbg + css.tcl">
										{{ g.goodsskutext ? g.goodsskutext : "" }}
									</text>
								</view>
								<view class="price-box psa lh-34">
									<view class="m-b-10 flex">
										<text :style="css.tcl">租金单价:</text>
										<text :style="css.tcp">￥</text>
										<text :style="css.tcp" class="ts-34 tb">{{ g.price }}</text>
										<text :style="css.tcl">/{{
                        item.leasetype == "days"
                          ? "天"
                          : item.leasetype == "hour"
                          ? "小时"
                          : "夜"
                      }}</text>
										<text class="m-l-auto">x{{ item.leasetimenum }}</text>
									</view>
									<view class="flex">
										<text :style="css.tcl">押金单价:</text>
										<text :style="css.tcp">￥</text>
										<text :style="css.tcp" class="ts-34 tb">{{ g.deposit }}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="flex p-30 bl-t bl-b m-t-30 br-10" :style="css.blpc">
							<view :style="css.tcl" class="ts-28 m-tb-10">押金:<text class="m-r-20 m-l-10"
									:style="css.tcp">¥{{ item.totaldeposit }}</text>租金:<text class="m-l-10"
									:style="css.tcp">¥{{ item.totalamount }}</text></view>
						</view>
						<view class="flex p-30 bl-t bl-b" :style="css.blpc"
							style="display: flex; align-items: center; justify-content: flex-end">

							<view class="flex tc-w br-10 ts-28 p-lr-30 p-tb-10" style="background: #2196f3; margin-right: 20rpx"
								@tap="showInputNoteModel(item)">备注</view>
							<view class="flex tc-w br-10 ts-28 p-lr-30 p-tb-10" style="background: #2196f3; margin-right: 20rpx"
								@tap="deviceListPopupShow(item)">设备列表</view>
							<view v-if="item.status == 3" class="m-tb-10" :style="css.tcmc">已归还</view>
							<view class="flex tc-w br-10 ts-28 p-lr-30 p-tb-10" :style="css.mcbg" @tap="leasePickup(item)"
								v-if="item.status == 1">确认取货</view>
							<view class="flex tc-w br-10 ts-28 p-lr-30 p-tb-10" :style="css.mcbg" @tap="
                  (completeOrder = item),
                    (returnDeposit = completeOrder.totaldeposit),
                    (showCompleteModel = true)
                " v-if="item.status == 2">确认归还</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<xy-empty :text="'暂无' + status[statusIndex].name + '订单'" />
		</view>
		<!-- 备注输入框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="添加备注!" placeholder="请添加备注"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!--租赁完成弹窗-->
		<block v-if="showCompleteModel">
			<view class="xy-modal-box xy-modal-box-center complete-model-box p-t-40 br-10 ovh" :style="css.mbg"
				:class="[showCompleteModel ? 'xy-modal-show' : '']">
				<view class="title ts-32 tc bl-b m-lr-40 p-b-40" :style="css.blpc">租赁完成退押金</view>
				<view class="c m-lr-40">
					<view class="flex p-tb-40 bl-b" :style="css.blpc"
						v-if="completeOrder.leasetype == 'hour' && completeOrder.timeout">
						<view>超时时间</view>
						<view class="m-l-auto">{{ completeOrder.timeout }}</view>
					</view>
					<view class="flex p-tb-40 bl-b" :style="css.blpc"
						v-if="completeOrder.leasetype == 'hour' && completeOrder.timeout">
						<view>超时费用</view>
						<view class="m-l-auto">¥{{ completeOrder.timeout_price }}</view>
					</view>
					<view class="flex p-tb-40 bl-b" :style="css.blpc">
						<view>用户支付押金</view>
						<view class="m-l-auto">¥{{ completeOrder.totaldeposit }}</view>
					</view>
					<view class="flex p-tb-40 bl-b" :style="css.blpc">
						<view>实际退款押金(可修改)</view>
						<view class="m-l-auto">
							<input class="tr" v-model="returnDeposit" type="number" />
						</view>
					</view>
				</view>
				<view class="bottom p-tb-50" :style="css.mbg">
					<button :style="css.mcbg" class="ts-30 lh-30 p-25 tc-w" @tap="complete()">
						确认
					</button>
				</view>
				<view class="close" :style="css.tcl"
					@tap="(showCompleteModel = false), (completeOrder = null), (returnDeposit = 0)">
					<text class="xyicon icon-close"></text>
				</view>
			</view>
			<view class="xy-modal-mask" :class="[showCompleteModel ? 'xy-mask-show' : '']"
				@tap="(showCompleteModel = false), (completeOrder = null), (returnDeposit = 0)"></view>
		</block>
		<!-- 设备列表弹窗 -->
		<uni-popup ref="deviceListPopup" type="bottom">
			<view class="device-list-popup">
				<view class="device-list-popup-header">
					<view class="device-list-popup-header-title">设备列表</view>
				</view>
				<view class="device-list-popup-content">
					<scroll-view scroll-y style="height: 70vh">
						<!-- 遍历设备列表，展示每个设备信息 -->
						<view class="device-list-popup-content-item" v-for="item in deviceList" :key="item.id">
							<view class="device-list-popup-content-item-header-title">
								设备编号：{{ item.code }}
							</view>
							<view class="device-list-popup-content-item-header-status" :class="['device-status' + status]">
								{{ getStatusText(item.status) }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<!-- 确认收货弹窗 + 扫码二维码 -->
		<uni-popup ref="confirmPopup" type="bottom">
			<view class="confirm-popup">
				<view class="confirm-popup-header">
					<button type="primary" size="mini" @tap="scanCode">扫码收货</button>
					<button type="primary" class="scan-code" size="mini" @tap="confirm">
						确认取货
					</button>
				</view>
				<view class="confirm-popup-content">
					<view class="confirm-popup-content-item" v-if="confirms.length > 0" v-for="(item, index) in confirms"
						:key="index">
						<view class="confirm-popup-content-item-title"> 设备编号：{{ item }} </view>
						<view class="confirm-popup-content-item-btn">
							<button class="mini-btn" type="warn" size="mini" @tap="remove(index)">
								删除
							</button>
						</view>
					</view>
					<view class="confirm-popup-content-item confirm-popup-content-item-empty">
						<view class="confirm-popup-content-item-title">
							<text>请先扫码获取设备</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import DateTabs from "@/uni_modules/hope-11-date-tabs/components/hope-11-date-tabs/date-tabs.vue";
	import xyEmpty from "@/components/xy-empty";
	export default {
		components: {
			DateTabs,
			xyEmpty,
		},
		data() {
			return {
				css: {},
				status: [{
						value: "1",
						name: "待取货"
					},
					{
						value: "2",
						name: "待归还"
					},
					{
						value: "3",
						name: "已完成"
					},
				],
				statusIndex: 0,
				orderList: [],
				isEmpty: false,
				isLoading: true,
				currentPage: 1,
				lastPage: 1,
				loadStatus: "loadmore",
				curDate: "",
				startDate: "",
				endDate: "",
				completeOrder: null, //完成订单
				showCompleteModel: false, //完成弹窗
				returnDeposit: 0, //退押金
				deviceList: [], //设备列表
				order_id: "", //订单id
				confirms: [], //确认收货
				remarkItem: null
			};
		},
		computed: {
			...mapState(["common"]),
		},
		onLoad(options) {
			this.$xyfun.setNavBar();
			var curDate = this.$xyfun.getDate();
			this.curDate = curDate;
			this.startDate = this.$xyfun.dateAdd(-30, curDate);
			this.endDate = this.$xyfun.dateAdd(30, curDate);
			this.css = this.$xyfun.css();
			if (options) {
				this.curappointmentId = options.appointment_id;
			}
			this.loadData();
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			this.orderList = [];
			this.loadData();
		},
		methods: {
			showInputNoteModel(item) {
				this.remarkItem = item;
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				let that = this;
				console.log(val)
				this.$api.post({
					url: "/staff/clerk/remark",
					loadingTip: "备注添加中",
					data: {
						order_id: that.remarkItem.id,
						remark:val
					},
					success(){
						wx.showToast({
							content:"添加成功"
						})
					}
				})
			},

			// 根据设备状态返回对应的中文描述
			getStatusText(status) {
				let statusObj = {
					0: "待支付",
					1: "租赁中",
					2: "已归还",
					"-1": "已损坏",
				};
				return statusObj[status];
			},
			// 根据设备状态返回对应的样式类
			getDeviceStatusClass(status) {
				return `device-status${status}`;
			},
			// 加载订单数据
			loadData() {
				this.$api.post({
					url: "/staff/clerk/orderList",
					loadingTip: "加载中...",
					data: {
						page: this.currentPage,
						date: this.curDate,
						status: this.status[this.statusIndex]["value"],
					},
					success: (res) => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.orderList = [...this.orderList, ...res.data];
						this.isEmpty = !this.orderList.length;
						this.currentPage = res.current_page;
						this.lastPage = res.last_page;
						this.loadStatus = this.currentPage < res.last_page ? "loadmore" : "nomore";
					},
				});
			},

			//购买取货
			buyPickup(order) {
				var that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定客户已取货吗？",
					success(e) {
						if (e.confirm) {
							that.$api.post({
								url: "/staff/clerk/buyPickup",
								data: {
									id: order.id,
								},
								success: (res) => {
									that.$xyfun.msg("操作成功");
									that.orderList = [];
									that.currentPage = 1;
									that.loadData();
								},
							});
						}
					},
				});
			},

			//完成服务
			serviceComplete(order) {
				var that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定服务已完成吗？",
					success(e) {
						if (e.confirm) {
							that.$api.post({
								url: "/staff/clerk/serviceComplete",
								data: {
									id: order.id,
								},
								success: (res) => {
									that.$xyfun.msg("操作成功");
									that.orderList = [];
									that.currentPage = 1;
									that.loadData();
								},
							});
						}
					},
				});
			},

			//租赁取货
			leasePickup(order) {
				console.log(order);
				this.order_id = order.id;
				var that = this;
				this.$refs.confirmPopup.open();
			},

			// 租赁完成
			complete() {
				this.$api.post({
					url: "/staff/clerk/leaseComplete",
					data: {
						id: this.completeOrder.id,
						deposit: this.returnDeposit,
						timeout_time: this.completeOrder.timeout_time,
						timeout_price: this.completeOrder.timeout_price,
					},
					success: (res) => {
						this.$xyfun.msg("操作成功");
						this.showCompleteModel = false;
						this.orderList = [];
						this.currentPage = 1;
						this.loadData();
					},
				});
			},

			//切换日期
			changeDate(e) {
				this.curDate = e.dd;
				this.startDate = this.$xyfun.dateAdd(-30, e.dd);
				this.endDate = this.$xyfun.dateAdd(30, e.dd);
				this.currentPage = 1;
				this.orderList = [];
				this.loadData();
			},

			setTab(index) {
				this.statusIndex = index;
				this.currentPage = 1;
				this.orderList = [];
				this.loadData();
			},

			//设备列表弹窗
			deviceListPopupShow(item) {
				this.deviceList = item.order_code_list;
				this.$refs.deviceListPopup.open();
			},
			// 扫码收货
			scanCode() {
				let that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log(res);
						let url = res.result;
						console.log(url);
						const match = url.match(/deviceSN=sn(\d+)/);
						const result = match ? match[1] : null;
						console.log(result);
						if (result == null) {
							wx.showToast({
								title: "当前二维码未扫描到设备",
								icon: "none",
							});
							return;
						}
						that.$api.post({
							url: "/staff/clerk/scan_code",
							data: {
								code: result,
								order_id: that.order_id,
							},
							success: (res) => {
								console.log(that.confirms.indexOf(res));
								if (that.confirms.indexOf(res) == -1) {
									that.confirms.push(res);
								}
							},
							fail: (err) => {
								console.log(err);
							},
						});
					},
				});
			},
			// 确认取货
			confirm() {
				let that = this;
				if (that.confirms.length == 0) {
					that.$xyfun.msg("请先扫码获取设备");
					return;
				}
				uni.showModal({
					title: "温馨提示",
					content: "确定客户已取货吗？",
					success(e) {
						if (e.confirm) {
							that.$api.post({
								url: "/staff/clerk/leasePickup",
								data: {
									id: that.order_id,
									code: that.confirms.join(","),
								},
								success: (res) => {
									that.$xyfun.msg("操作成功");
									that.orderList = [];
									that.currentPage = 1;
									that.confirms = [];
									that.$refs.confirmPopup.close();
									that.loadData();
								},
							});
						}
					},
				});
			},
			// 删除设备
			remove(index) {
				this.confirms.splice(index, 1);
			},
		},
	};
</script>

<style scoped lang="scss">
	.appointment {
		padding-bottom: 200rpx;
	}

	.tab {
		width: 100%;

		.line {
			height: 4rpx;
			width: 60rpx;
			margin: 10rpx auto 0;
		}
	}

	.order-list {
		.goods-list {
			width: 100%;

			.item {

				.l,
				.l image {
					width: 170rpx;
					height: 170rpx;
				}

				.r {
					width: 440rpx;

					.price-box {
						position: absolute;
						left: 0;
						bottom: 5rpx;
						width: 100%;
					}
				}
			}

			.seat-total {
				justify-content: space-between;
				width: 100%;
			}
		}
	}

	.complete-model-box {
		width: 690rpx;

		input {
			width: 150rpx;
		}

		.bottom {
			button {
				border-radius: 40rpx;
				width: 360rpx;
				margin-left: 50rpx;
				margin: 0 auto;
			}

			button::after {
				border: none;
			}
		}

		.close {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.confirm-popup {
		width: 100%;
		height: 80vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 0;
		box-sizing: border-box;

		.confirm-popup-header {
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			font-weight: 600;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			button {
				margin: 0;
			}

			.scan-code {
				background: #007aff;
				margin-left: 20rpx;
			}
		}

		.confirm-popup-content {
			width: 100%;
			height: calc(100%);
			background: #fff;
			border-top: 1px solid #000;
			box-sizing: border-box;

			.confirm-popup-content-item {
				padding: 30rpx;
				border-bottom: 1px solid #eff0f2;

				&:last-child {
					border-bottom: none;
				}
			}

			.confirm-popup-content-item-empty {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 32rpx;
				color: #999;
			}
		}

		.confirm-popup-content-item-title-text {
			width: 100%;
			height: 120rpx;
			background: #007aff;
			color: #fff;
		}

		.confirm-popup-content-item-title-btn {
			width: 100%;
			height: 100rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				margin: 0;
			}
		}
	}

	.device-list-popup {
		width: 100%;
		height: 80vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 0;
		box-sizing: border-box;

		.device-list-popup-header {
			width: 100%;
			background: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			font-weight: 600;
		}

		.device-list-popup-content {
			width: 100%;
			height: 100%;
			background: #fff;
			border-top: 1px solid #000;
			box-sizing: border-box;
			padding: 0 30rpx;

			.device-list-popup-content-item {
				width: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #eff0f2;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.device-list-popup-content-item-header-title {
					font-size: 32rpx;
					color: #333;
				}

				.device-status0 {
					color: #008000;
				}

				.device-status1 {
					color: #ff9900;
				}

				.device-status2 {
					color: #ff0000;
				}

				.device-status3 {
					color: #ff0000;
				}
			}
		}
	}
</style>